<template>
  <div class="more-menu" v-if="showMoreMenu">
    <div class="menu-item" @click="handleSpeaker">
      <el-icon><Microphone /></el-icon>
      <span>喊话器</span>
    </div>
    <div class="menu-item">
      <el-icon><VideoCamera /></el-icon>
      <span>投影</span>
    </div>
    <div class="menu-item">
      <el-icon><Connection /></el-icon>
      <span>元素映射</span>
    </div>
  </div>

  <div class="speaker-panel" v-if="showSpeakerPanel">
    <div class="panel-header">
      <span>极至喊话器T30s+H1T</span>
      <el-icon @click="handleCloseSpeaker"><Close /></el-icon>
    </div>
    <div class="panel-content">
      <div class="control-item">
        <span>喊话器</span>
        <el-switch v-model="speakerEnabled" style="padding-left: 20px;"/>
      </div>
      <div class="speaker-mode" v-if="speakerEnabled">
        <div class="mode-select">
          <el-form-item label="喊话模式" prop="lcTheme">
            <el-input  placeholder="TTS喊话" disabled />
          </el-form-item>
        </div>
        <div  class="tts-content">
          <el-form-item label="喊话内容" prop="lcTheme">
            <el-select 
              v-model="anfrom.haId" 
              placeholder="请选择喊话内容"
              @change="handleHaIdChange"
              style="width: 60%;"
              :teleported="false"
            >
              <el-option 
                v-for="item in announcementList"
                :key="item.haId"
                :label="item.haTheme"
                :value="item.haId"
              />
            </el-select>
          </el-form-item>
          <div class="setting-item">
          <el-form-item label="音量" prop="haVolume">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input v-model.number="anfrom.haVolume" />
              </el-col>
              <el-col :span="12">
                <el-slider v-model="anfrom.haVolume" :min="0" :max="180" />
              </el-col>
            </el-row>
          </el-form-item>
        </div>
          <div v-if="announcementList.length === 0" style="color: #666;margin-top: 8px;">
            暂无喊话内容
          </div>
          <el-input
            class="message-content"
            v-else-if="anfrom.haTtsText"
            v-model="anfrom.haTtsText"
            type="textarea"
            :rows="4"
            style=" background-color: rgba(255, 255, 255, 0.1);"
          />
        </div>
      </div>
      
      <div class="control-item">
        <span>灯光器</span>
        <el-switch v-model="lightEnabled" style="padding-left: 20px;"/>
      </div>
      <div class="light-settings" v-if="lightEnabled">
        <div class="setting-item">
          <el-form-item label="主题" prop="lcTheme">
            <el-select v-model="liform.lightTheme" @change="handleLightThemeChange" :teleported="false" style="margin-left: 42px;">
              <el-option 
                v-for="item in lightList" 
                :key="item.lcId" 
                :label="item.lcTheme" 
                :value="item.lcId"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="setting-item">
          <el-form-item label="俯仰角度(°)" prop="tiltAngle">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input v-model.number="liform.tiltAngle" />
              </el-col>
              <el-col :span="12">
                <el-slider v-model="liform.tiltAngle" :min="0" :max="180" />
              </el-col>
            </el-row>
          </el-form-item>
        </div>
        <div class="setting-item">
          <el-form-item label="探照灯" prop="warningLightStatus">
            <el-select v-model="liform.searchlightStatus" placeholder="请选择探照灯状态" :teleported="false" style="margin-left: 27px;">
              <el-option v-for="dict in searchlight_status" :key="dict.value" :label="dict.label"
                :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="setting-item">
          <el-form-item label="亮度调节(lx)" prop="brightness">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input v-model.number="liform.brightness"
                  :disabled="liform.searchlightStatus === 0" />
              </el-col>
              <el-col :span="12">
                <el-slider v-model="liform.brightness" :min="0" :max="100"
                  :disabled="liform.searchlightStatus === 0" />
              </el-col>
            </el-row>
          </el-form-item>
        </div>
        <div class="setting-item">
          <el-form-item label="爆闪频率(Hz)" prop="strobeFreq">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input v-model.number="liform.strobeFreq"
                  :disabled="liform.searchlightStatus === 0" />
              </el-col>
              <el-col :span="12">
                <el-slider v-model="liform.strobeFreq" :min="0" :max="100"
                  :disabled="liform.searchlightStatus === 0" />
              </el-col>
            </el-row>
          </el-form-item>
        </div>
        <div class="setting-item">
          <el-form-item label="警示灯" prop="warningLightStatus">
            <el-select v-model="liform.warningLightStatus" placeholder="请选择警示灯状态" :teleported="false" style="margin-left: 27px;">
              <el-option v-for="dict in warning_light_status" :key="dict.id" :label="dict.label"
                :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="color-settings">
          <el-form-item label="颜色配置" prop="colorConfig">
            <el-radio-group v-model="liform.colorConfig" :disabled="liform.warningLightStatus === 0">
              <el-radio v-for="color in colorOptions" :key="color.value" :label="color.label"
                :value="color.value">
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <el-button type="primary" @click="handleStart">开始</el-button>
      <el-button @click="handleStop">停止</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { Close, Microphone, VideoCamera, Connection } from '@element-plus/icons-vue'
import { listAnnouncement } from "@/api/equipment/hailerAnnouncement"
import { listLightControl } from "@/api/equipment/LightControl"

const props = defineProps({
  showMoreMenu: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:showMoreMenu'])

const { proxy } = getCurrentInstance();
const { warning_light_status, searchlight_status } = proxy.useDict('warning_light_status', 'searchlight_status');

const showSpeakerPanel = ref(false)
const speakerEnabled = ref(false)
const lightEnabled = ref(false)

const anfrom = ref({
  haId: '',
  haTtsText: '',
  haVolume: 0, 
})
const liform = ref({
  tiltAngle: 0,
  brightness: 1,
  strobeFreq: 1,
  searchlightStatus: 0,
  warningLightStatus: 0,
  colorConfig: 'red'
})

const colorOptions = reactive([
  { value: 1, label: '红色' },
  { value: 2, label: '蓝色' },
  { value: 3, label: '绿色' },
  { value: 4, label: '黄色' },
  { value: 5, label: '白色' }
])

const handleSpeaker = async () => {
  showSpeakerPanel.value = true;
  getAnnouncementList();
  getLightList();
}

const handleCloseSpeaker = () => {
  showSpeakerPanel.value = false
}

const handleStart = () => {
  // 处理开始按钮点击事件
  console.log('开始喊话')
}

const handleStop = () => {
  // 处理停止按钮点击事件
  console.log('停止喊话')
}

const anQueryParams = ref({
  page: 1,
  pageSize: 100,
})
const loading = ref(false)
const announcementList = ref([])

const getAnnouncementList = async () => {
  loading.value = true
  try {
    const response = await listAnnouncement(anQueryParams.value)
    console.log('API返回数据:', response)
    announcementList.value = response.rows
    if (response.rows && response.rows.length > 0) {
      console.log('设置默认选中:', response.rows[0])
      anfrom.value = {
        haId: response.rows[0].haId,
        haTtsText: response.rows[0].haTtsText,
        haVolume: response.rows[0].haVolume,
      }
    }
  } catch (error) {
    console.error('获取喊话内容失败:', error)
  } finally {
    loading.value = false
  }
}

const handleHaIdChange = (value) => {
  console.log('选中的值:', value)
  console.log('当前列表:', announcementList.value)
  const selected = announcementList.value.find(item => item.haId === value)
  console.log('找到的项:', selected)
  if (selected) {
    anfrom.value = {
      haId: selected.haId,
      haTtsText: selected.haTtsText,
      haVolume: selected.haVolume,  
    }
  }
}

const lightList = ref([])
const lightQueryParams = ref({
  pageNum: 1,
  pageSize: 100,
})

const getLightList = async () => {
  try {
    const response = await listLightControl(lightQueryParams.value)
    lightList.value = response.rows
    if (response.rows && response.rows.length > 0) {
      const firstLight = response.rows[0]
      liform.value = {
        lightTheme: firstLight.lcId ,
        tiltAngle: firstLight.tiltAngle || 0,
        brightness: firstLight.brightness || 1,
        strobeFreq: firstLight.strobeFreq || 1,
        searchlightStatus: firstLight.searchlightStatus || 0,
        warningLightStatus: firstLight.warningLightStatus || 0,
        colorConfig: firstLight.colorConfig || 'red'
      }
      console.log('处理后的列表:', lightList.value)
    }
  } catch (error) {
    console.error('获取灯光主题失败:', error)
  }
}

const handleLightThemeChange = (value) => {
  console.log('选中的灯光主题:', value)
  const selectedLight = lightList.value.find(item => item.lcId === value)
  if (selectedLight) {
    liform.value = {
      lightTheme: selectedLight.lcId,
      tiltAngle: selectedLight.tiltAngle || 0,
      brightness: selectedLight.brightness || 1,
      strobeFreq: selectedLight.strobeFreq || 1,
      searchlightStatus: selectedLight.searchlightStatus || 0,
      warningLightStatus: selectedLight.warningLightStatus || 0,
      colorConfig: selectedLight.colorConfig || 'red'
    }
  }
}
</script>

<style scoped lang="scss">
.more-menu {
  position: fixed;
  top: 50px;
  right: 20px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  z-index: 99999999999;
  padding: 8px 0;
  min-width: 120px;

  .menu-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    color: #fff;
    cursor: pointer;
    font-size: 14px;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .el-icon {
      margin-right: 8px;
    }
  }
}

.speaker-panel {
  position: fixed;
  top: 50px;
  right: 150px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  z-index: 99999999999;
  width: 400px;
  color: #fff;

  .panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .panel-content {
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
    }

    .control-item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .speaker-mode, .light-settings {
      padding: 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      margin-bottom: 16px;

      .mode-select {
        margin-bottom: 16px;
      }

      .message-content {
        :deep(.el-textarea__inner){
          color: #e2e2e2;
          background: rgba(255, 255, 255, 0.1);
        }
        border-radius: 4px;
        font-size: 14px;
      }

      .audio-list {
        margin: 8px 0;
        .audio-item {
          display: flex;
          justify-content: space-between;
          padding: 8px;
          background: rgba(255, 255, 255, 0.1);
          margin-bottom: 4px;
          border-radius: 4px;
        }
      }
    }

    .setting-item {
      margin-bottom: 16px;
    }

    .color-settings {
      display: flex;
      justify-content: space-around;
      margin-top: 16px;
    }

    :deep(.el-form-item__label) {
      color: white;
    }
    :deep(.el-input__wrapper) {
      background-color: #1a1a1a;
      box-shadow: 0 0 0 1px #333 inset;
    }
    :deep(.el-select__wrapper) {
      background-color: #1a1a1a;
      box-shadow: 0 0 0 1px #333 inset;
    }
    :deep(.el-select__placeholder) {
      color: #ddd;
    }
    :deep(.el-input__inner) {
      color: #ddd;
    }
  }

  .panel-footer {
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  :deep(.el-select-dropdown) {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
  }

  :deep(.el-select-dropdown__item) {
    color: white !important;
    background-color: #1a1a1a !important;
  }

  :deep(.el-select-dropdown__item.hover), 
  :deep(.el-select-dropdown__item:hover) {
    background-color: #333 !important;
    color: white !important;
  }

  :deep(.el-select-dropdown__item.selected) {
    color: #409EFF !important;
    font-weight: bold;
    background-color: #1a1a1a !important;
  }
}
</style> 